<template>
	<!-- <view> -->
	<view class="page" :style="{ 'min-height': h + 'px' }">
		<c-nav-bar1 :title="titles" bgColor="transparent"></c-nav-bar1>
		<view class="bg"></view>
		<view class="content" :style="{ 'padding-top': mt + 'px' }">
			<view class="head">
				<text class="status">{{ orderStatusCfg[myList.useStatus+''] }}</text>
				<!-- <text class="status" v-if="myList.useStatus == '0'">待支付</text>
				<text class="status" v-if="myList.useStatus == '-1'">已关闭</text>
				<text class="status" v-if="myList.useStatus == '1'">待使用</text>
				<text class="status" v-if="myList.useStatus == '2'">已完成</text>
				<text class="status" v-if="myList.useStatus == '3'">退款中</text>
				<text class="status" v-if="myList.useStatus == '4'">已退款</text> -->
				<text>￥</text>
				<text>{{ myList.realityPay }}</text>
			</view>
			<view class="djs" v-if="myList.useStatus==0&&djsTime">
				<uCountDown text="剩余支付时间：" color="#ffffff" :fontSize="24" @finish="finish" :djsTime="djsTime" />
			</view>
			<view class="ticketInfo">
				<view class="name">
					{{ myList.scenicName }}
				</view>
				<view class="type">
					<!-- {{myList.ticketList[0].ticketName}}×{{myList.num}}份 -->
					<!-- 数量/游客数量*{{ myList.num }} -->
					游客数量*{{ myList.num }}
				</view>
				<view class="date">
					<text>游玩日期</text>
					<text>{{ myList.playDate || '2023-11-1 19:31:16' }}</text>
					<text>{{ week }}</text>
				</view>
				<u-line></u-line>
				<view class="position">
					<u-icon name="map" :label="myList.spotAddress" size="26rpx" :labelSize='24'></u-icon>
				</view>

			</view>


			<view class="voucherCode">
				<view class="title">
					<text>凭证码</text>
					<text class="orange" v-if="myList.useStatus == 1">凭有效身份证件或凭证码直接验证使用</text>
				</view>
				<view class="codeList" v-if="myList.useStatus == 1">
					<view class="touristList">
						<view :class="['tourist', chooseTouristNum == index ? 'tourist_selected' : '']"
							v-for="item, index in ticketList2" @click="chooseTourist(index)" :key="index">
							{{ item.realName }}
						</view>
					</view>
					<view class="listItem" v-for="(item, i) in myList.ticketList" :key="i">
						<view v-show="i == chooseTouristNum">
							<!-- <view > -->
							<view class="top">
								<canvas :canvas-id="'qrcode' + i" v-show="!qr_code[i]"
									style=" margin:auto; width:240rpx;height: 240rpx;"></canvas>
								<image v-if="qr_code[i]" style="margin:auto; width:240rpx;height: 240rpx;"
									:src="qr_code[i]"></image>
							</view>
							<view class="verityInfo">
								入园时间 <span style="margin-left: 24px;"> {{ item.openDate }}</span>
							</view>
							<view class="verityInfo">
								退改规则 <span style="margin-left: 24px;margin-bottom: 20rpx;"> 随时退，未使用可随时申请退订。</span>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="codeList" v-if="myList.useStatus == 2">
					<view class="touristList">
						<view :class="['tourist', chooseTouristNum == index ? 'tourist_selected' : '']"
							v-for="item, index in myList.ticketList" @click="chooseTourist(index, item.oid)"
							:key="index">
							{{ item.realName }}
						</view>
					</view>
					<view class="listItem" v-for="item, index in myList.ticketList" :key="index">
						<view v-show="item.oid == chooseTouristId">
							<view class="top">
								<canvas :canvas-id="qrcode(index)"
									style=" margin:auto; width:240rpx;height: 240rpx;"></canvas>
							</view>
							<view class="verityInfo">
								入园时间 <span style="margin-left: 24px;"> {{ item.openDate }}</span>
							</view>
							<view class="verityInfo">
								退改规则 <span style="margin-left: 24px;margin-bottom: 20rpx;"> 随时退，未使用可随时申请退订。</span>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 游客信息 -->
			<view class="voucherCode_colse">
				<view class="codeList">
					<view class="title_info">
						<text>游客信息</text>
					</view>
					<view class="listItem" v-for="(item, index) in myList.ticketList" :key="index">
						<view class="name">
							{{ item.realName }}
							<text class="ticketType">{{ item.ticketName }}</text>
							<text
								:class="item.status == 4 ? 's4 ticketType' : 'ticketType'">{{ (statusType[item.status]) }}</text>
						</view>
						<view>
							{{ item.idCode }}
						</view>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="orderInfo">
				<view class="tit">订单信息</view>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">订单编号</text>

					<text slot="title" class="val">
						{{ orderId }}
						<!-- {{ myList.ticketList[0].orderCode }} -->
						<text class="copy" @click="copyOrderId()">复制</text>
					</text>

				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">下单时间</text>

					<text slot="title" class="val"> {{ myList.orderTime }}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">姓名</text>

					<text slot="title" class="val">{{ myList.linkName || '周杰伦' }}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">手机号码</text>

					<text slot="title" class="val">{{ myList.linkMobile || '13888889999' }}</text>
				</u-cell>
			</view>

		</view>



		<view class="btns">
			<template v-if="myList.useStatus == 0">
				<view class="" @click="cancelOrder()">
					取消订单
				</view>
				<view class="" @click="handlePay()"
					style="color:#fff ; border-color: #007A69; background-color: #007A69;">
					立即支付
				</view>
			</template>
			<template v-if="myList.useStatus == 1">

				<view class="" @click="goTotuikuan()"
					style="color:#fff ; border-color: #007A69; background-color: #007A69;">
					退票
				</view>
				<view class="" style="color:#fff ; border-color: #007A69; background-color: #007A69;"
					@click="orderAgain()">
					再次预订
				</view>


			</template>

			<template v-if="myList.useStatus == -1 || myList.useStatus == -3">

				<view class="" @click="deleteOrder()">
					删除订单
				</view>
				<view class="" style="color:#fff ; border-color: #007A69; background-color: #007A69;"
					@click="orderAgain()">
					再次预订
				</view>


			</template>

			<template v-if="myList.useStatus == 4">

				<view class="" style="color:#fff ; border-color: #007A69; background-color: #007A69; width: 686rpx;"
					@click="orderAgain()">
					再次预订
				</view>
			</template>

		</view>
		<!-- 支付页面 -->
		<u-popup :show="payShow" @close="payShow = false">
			<view class="details details_pay">
				<view class="title">
					<text>请选择</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="payShow = false"></image>
				</view>
				<view class="wechat_pay">
					<view class="wp_left">
						<image src="@/static/index/steamerTicket/img_pay.jpg" mode=""></image>
						<text>微信支付</text>
					</view>
					<image src="https://i.ringzle.com/file/20240301/4669376abd424e6aaf24bc953a19e43b.png" mode="">
					</image>
				</view>
				<view class="pay_submit" @tap="toPay">确定</view>
			</view>
		</u-popup>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title1" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>
	</view>

</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import UQrcode from '@/uqrcode.js'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				titles: '订单详情',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				payShow: false,
				qrcodeData: 'https://i.ringzle.com/file/20231028/ef44bb2c438a49ee859d570dee881b80.jpeg',
				orderCode: '',
				myList: {},
				show: false,
				week: '',
				chooseTouristNum: 0,
				chooseTouristId: '',
				status: '',
				orderId: '',
				qr_code: [],
				ticketList2: [], //待使用的游客
				statusType: {
					4: "已退款",
					3: "退票中",
					"-1": "已取消",
					0: "待支付",
					1: "待使用",
					2: "已使用"
				},
				orderStatusCfg: {
					'0': '待支付',
					'1': '待使用',
					'-1': '已取消',
					'-2': '退款中',
					'-3': '已退款',
					'3': '已完成',
					'4': '已退票'
				},
				djsTime: 0,
				showdelete: false,
				orderType: null,
				delId: null,
				title1: '温馨提示',
				contented: '您确定要删除吗？确定删除将不可撤回！',
			}
		},
		onLoad(option) {
			this.orderId = option.orderCode
			this.status = option.status || '';
			this.getList()
		},
		computed: {

		},
		methods: {
			chooseTourist(index) {
				this.chooseTouristNum = index;
			},
			qrcode(index) {
				return 'qrcode' + index
			},
			cancelOrder() {
				this.$api.get('/api/scenic/cancelOrder/' + this.orderId).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.data,
							icon: 'success'
						})
						console.log(res.data)
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
							})
						},1000)
						//this.getList()
					} else {
						uni.showToast({
							title: res.data.data,
							icon: 'none'
						})
					}

				})
			},
			handlePay() {
				this.payShow = true
			},
			qrFun: function(text, index, ticketList) {
				let that = this;
				UQrcode.make({
					canvasId: 'qrcode' + index, //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: text, //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 120,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {
						that.qr_code.push(res);
						return new Promise((resolve, reject) => {
							resolve(res)
						})
					}
				})
			},
			goTotuikuan() {
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/refund?id=' + this.orderId
				})
			},
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			getList() {
				this.$api.get('/api/scenic/selectOrderDetails?orderCode=' + this.orderId)
					.then(res => {
						this.myList = res.data.data;
						if (this.myList.useStatus == 0) {
							let diffMS = Date.parse(new Date()) - Date.parse(new Date(this.myList.orderTime));
							if (diffMS < this.$gqTime) {
								this.djsTime = this.$gqTime - diffMS - 1000; //提前一秒，便于取消刷新
							}
						}
						if (this.status) {
							this.myList.useStatus = this.status;
						}
						this.setCOde();
						this.myList.playDate = res.data.data.playDate.split(' ')[0]
						this.week = this.getDayOfWeek(this.myList.playDate)
					})
			},
			//绘制二维码
			async setCOde() {
				let ticketList = this.myList.ticketList.filter((item) => item.status == 1);
				this.ticketList2 = ticketList;
				for (let i = 0; i < ticketList.length; i++) {
					let d = await this.qrFun(ticketList[i].barcode, i, ticketList);
				}
			},
			handlePrivacy(params) {
				params.ticketList.forEach((i, index) => {
					this.myList.ticketList[index].idCode = params.ticketList[index].idCode.substring(0, 6) +
						'********' + params.ticketList[index].idCode.substring(13)
				})
				this.myList.linkName = '*' + params.linkName.substring(1)
				this.myList.linkMobile = params.linkMobile.substring(0, 3) +
					'****' + params.linkMobile.substring(7)
			},

			getDayOfWeek(dateString) {
				const date = new Date(dateString);
				const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const dayOfWeek = daysOfWeek[date.getDay()];
				return dayOfWeek;
			},
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
				})
			},
			confrimPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.navigateTo({
								url: `${'/pagesTrip/scenicSpots/paySuccess?orderId=' + this.orderId + '&realityPay=' + this.myList.realityPay}`

							})
						})
					}
				})
			},
			orderAgain() {
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/index'
				})
			},
			copyOrderId() {
				uni.setClipboardData({
					data: this.myList.ticketList[0].orderCode,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				})
			},
			// 取消
			cancel() {
				this.showdelete = false
			},
			deleteOrder() {
				this.showdelete = true
			},

			// 确定删除
			confirmed() {
				this.$api.get('/api/scenic/delOrder/' + this.orderId).then((res) => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.data,
							icon: 'success',
							duration: 2000,
							success() {
								uni.redirectTo({
									url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
								})
							},
						});
						this.showdelete = false

					} else {
						uni.showToast({
							title: res.data.data,
							icon: 'none',
							duration: 2000,
							success() {
								uni.redirectTo({
									url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
								})
							},

						});
						this.showdelete = false
					}
				})

			},
			finish() {
				this.$api.get('/api/scenic/cancelOrder/' + this.orderId).then(res => {
					setTimeout(() => {
						this.djsTime = 0;
						uni.reLaunch({
							url: '/pagesMy/order/index?name=景点门票&type=0&typeIndex=2'
						})
						// this.getList();
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F5F8FA;

		.content {
			position: relative;
			z-index: 3;
			padding-bottom: 160rpx;

			.to_be_used {
				color: #333;
			}

			.to_be_paid {
				color: #FEB000;
			}

			.closed {
				color: #999;
			}
		}
	}



	.bg {
		// height: 100%;
		// position: fixed;

		// z-index: 1;
		// width: 100%;
		// background-image: linear-gradient(to bottom, #0EBFFE 0%, #01D1EA 20%, #F5F8FA 50%);
		height: 700rpx;
		position: fixed;
		// top: 44px;
		z-index: 1;
		width: 100%;
		background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
	}

	.orderInfo {
		background-color: #fff;
		border-radius: 16rpx;
		width: 96%;
		margin: 0 auto 23rpx;



		.cell {
			display: flex;
			justify-content: space-between;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #666;
		}

		.icon {
			font-size: 28rpx;
			color: #666;
		}

		.val {
			font-size: 28rpx;
			// width: 94%;
			width: 100%;
			text-align: end;

			.copy {
				color: #007A69;
				border: #007A69 1rpx solid;
				margin-left: 5rpx;
				width: 70rpx;
				height: 32rpx;
				border-radius: 23rpx;
				font-size: 20rpx;
				display: inline-block;
				text-align: center;
				line-height: 32rpx;
			}
		}
	}

	.voucherCode_colse {
		padding: 0 20rpx 20rpx;

		.title {

			height: 80rpx;
			font-weight: 600;
			font-size: 31rpx;
			color: #333;
			padding: 20rpx 30rpx;
			line-height: 80rpx;
			background: #fff;
			border-radius: 20rpx;
		}

		.title_info {
			line-height: 80rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #333;
			padding: 0 10rpx;
		}

		.codeList {
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
		}

		.listItem {

			display: flex;
			justify-content: space-between;
			padding: 13rpx 19rpx;
			flex-direction: row;
			font-size: 26rpx;
			color: #666;
			align-items: center;

			.verityInfo {
				margin: 30rpx 0;
				line-height: 28rpx;
				height: 28rpx;
			}

			.top {
				margin-bottom: 30rpx;
			}

			.ticketType {
				margin-left: 20rpx;
				font-weight: 400;
				color: #94A9C8;
				line-height: 33rpx;
				height: 33rpx;
				font-size: 24rpx;
				background: #F5F8FA;
				border-radius: 8rpx;
				padding: 4rpx;

				&.s4 {
					color: #E6A23C;
					background: rgb(250, 236, 216)
				}

			}
		}
	}

	.voucherCode {
		margin: 20rpx 23rpx;
		padding: 20rpx 24rpx 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
		z-index: 2;

		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: #333;
		}

		.codeList {
			.touristList {
				width: 100%;
				margin: 30rpx 0;
				display: inline-grid;
				grid-template-columns: repeat(5, minmax(18%, 1fr));
				grid-gap: 10rpx;
				// justify-items: center;
				align-items: center;

				.tourist {
					width: max-content;
					padding: 13rpx 43rpx;
					border-radius: 10rpx;
					border: 1rpx solid #e5e5e5;
				}

				.tourist_selected {
					color: #fff;
					background: #007A69;
				}
			}

			.listItem {
				display: flex;
				justify-content: center;

				font-size: 26rpx;

				flex-direction: column;

				.verityInfo {
					margin-top: 40rpx;
					line-height: 28rpx;
					height: 28rpx;
				}

				.top {
					// margin: 45rpx 0;
					text-align: center;
				}

				.codeList_left {
					position: relative;
					color: #777777;
					line-height: 30rpx;

					.pingzheng {
						margin-top: 67rpx;
					}

					.icon {
						position: absolute;
						width: fit-content;
						font-weight: 400;
						color: #94A9C8;
						line-height: 33rpx;
						height: 33rpx;
						font-size: 24rpx;
						border-radius: 8rpx;
						padding: 4rpx;
					}

					.name {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;
						margin: 20rpx 0;

						.ticketType {
							margin-left: 20rpx;
							font-weight: 400;
							color: #94A9C8;
							line-height: 33rpx;
							height: 33rpx;
							font-size: 24rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							padding: 4rpx;

						}
					}
				}



			}
		}


	}

	.orange {
		color: #FF7D01;
		margin-left: 30rpx;
		font-size: 26rpx;
		font-weight: 400;
	}

	.ticketInfo {
		margin: 0px 23rpx;
		padding: 44rpx 24rpx 20rpx;
		border-radius: 20rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;

		.name {
			font-weight: 600;
			font-size: 34rpx;
			color: #333;

			.ticketType {
				margin-left: 20rpx;
			}
		}

		.date {
			padding: 20rpx 0 20rpx;

			text {
				font-size: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}

				&:nth-child(3) {
					color: #FF7D01;
					margin-left: 15rpx;
				}
			}
		}

		.position {
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #808080;
		}

		.type {
			padding: 20rpx 0 20rpx;
			font-size: 26rpx;
			color: #808080;
		}

		.prices {

			.txt,
			.num {
				color: #666;
				font-size: 26rpx;
			}

			.txt {
				margin-left: -30rpx;
			}

			.num {
				margin-right: -30rpx;
			}
		}


	}

	.topHead {
		width: 96%;
		margin: 0 auto;
		background-color: #F5F8FA;
		padding: 28rpx 0 28rpx 84rpx;
		border-radius: 16rpx;
		position: relative;

		text {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			border-radius: 16rpx 0 0 16rpx;
			width: 48rpx;
			color: #fff;
			font-size: 20rpx;
			background-color: #484F61;
			text-align: center;
			height: 100%;
			padding: 15rpx 10rpx 0;

		}

		.p {
			font-size: 28rpx;
			color: #333;

			&:nth-of-type(1) {
				font-weight: 600;
				margin-bottom: 16rpx;
			}
		}


	}

	.code {
		margin-top: 40rpx;
		text-align: center;
		position: relative;

		.cover,
		.sx {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			width: 340rpx;
			height: 340rpx;
			top: 66rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.sx {
			width: 120rpx;
			height: 120rpx;
			top: 150rpx;
			background: transparent;
		}

		.txt {
			font-size: 28rpx;
		}

		image {
			width: 340rpx;
			height: 340rpx;
			margin: 30rpx 0;
		}
	}

	.head.data-v-4aeef636 {
		background: #0EBFFE;
	}

	.head {
		padding: 34rpx 24rpx;
		display: flex;
		position: relative;
		z-index: 2;
		align-items: center;
		font-weight: bold;

		text {
			color: #fff;

			&:nth-child(1),
			&:nth-child(3) {
				font-size: 44rpx;
			}

			&:nth-child(2) {
				flex: 1;
				text-align: right;
				width: 100px;
				font-size: 36rpx;
			}
		}
	}

	.djs {
		width: calc(100% - 88rpx);
		padding: 0 20rpx;
		margin-bottom: 35rpx;
		position: relative;
	}

	.btns {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 4;
		left: 0;
		display: flex;
		padding: 32rpx 32rpx 50rpx;
		background-color: #fff;
		gap: 0 20rpx;
		box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);


		&>view {
			width: calc(50% - 15rpx);
			height: 80rpx;
			border-radius: 46rpx;
			// border: 1rpx solid #999999;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: Bold;
			color: #111111;
			background-color: #F6F6F6;
		}
	}

	// .btns {
	// 	position: fixed;
	// 	bottom: 0;
	// 	z-index: 4;
	// 	left: 0;
	// 	display: flex;
	// 	padding: 16rpx;
	// 	background-color: #fff;
	// 	gap: 0 20rpx;
	// 	box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);
	// 	width: 750rpx;

	// 	.b_ {
	// 		width: 220rpx;
	// 		max-width: 220rpx;
	// 		height: 80rpx;
	// 		line-height: 80rpx;
	// 		border-radius: 16rpx;
	// 		color: #fff;
	// 		background-color: #007A69;

	// 	}
	// }

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 420rpx;
		height: 442rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		flex-direction: column;

		.title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 32rpx;
			height: 76rpx;

		}
	}

	/deep/.u-popup__content.data-v-3a231fda {
		border-radius: 24rpx;
	}

	.rect {
		margin-top: 14rpx;
		width: 202rpx;
	}

	/deep/.u-button--large.data-v-2bf0e569 {
		margin: 0 20rpx;
		width: 41%;
		height: 43px;
	}

	.details {
		padding: 40rpx 30rpx 200rpx;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 150rpx;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		&.details_pay {
			background: #F6F6F6;

			.wechat_pay {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 83rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 41rpx 24rpx;

				.wp_left {
					display: flex;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					text {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 24rpx;
					}
				}

				&>image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.pay_submit {
				margin-top: 59rpx;
				height: 92rpx;
				background: #007A69;
				border-radius: 46rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	}
</style>